<template>
	<view style="background-color: #f7f7f7; border: 1rpx solid transparent;">
		<view class="head">
			<image style="width: 100%;" src="../../static/tab/bg.png" mode="widthFix"></image>
			<view class="search">
				<view class="dw">
					<span>我的发布</span>
				</view>
				<view class="sousou">
					<u-search :searchIconSize="0" :showAction="false" @change="change" :clearabled="false" :height="36" style="width: 100%;" @search="search" shape="square-" borderColor="" placeholder="请输入你想搜索的关键词" v-model="keyword"></u-search>
					<view class="" style="margin-top: 10rpx; margin-right: 10rpx;" @click="sousou">
						<image class="searchImg" src="../../static/sousuo.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="shouyi">
			<view class="mo">
				<view class="shu">0</view>
				<view class="tex">昨日收益</view>
			</view>
			<view class="mo" @click="onskip('/pages/index/balance')">
				<view class="shu">0</view>
				<view class="tex">待提现</view>
			</view>
			<view class="mo">
				<view class="shu">0</view>
				<view class="tex">总收益</view>
			</view>
		</view>
		<view class="note">
			通知，因抖音规则调整，请小于500粉丝的用户<text @click="onskip('/pages/index/enter')">填写入驻信息</text>
		</view>

			
			<view class="lis" v-for="(item,index) of csListArrl">
					<uni-swipe-action>
							<uni-swipe-action-item
							    
							    :right-options="options2"
							    :show="isOpened"
							    :auto-close="false"
							    @change="change,(index)"
							    @click="bindClick(item)"
							>
								<view class="">
									<view class="options">
											<view class="na">
												<span>{{item.name}}</span>
												<!-- <span>+88.00</span> -->
											</view>
											<view class="ti">
												<span>有效播放：<text>{{item.bofangliang}}</text></span>
												<span>广告收益：<text>{{item.shouyi}}</text></span>
											</view>
											
										</view>
										<!-- <view class="remove" @click="delData(item)">删除</view> -->
									</view>
									
							</uni-swipe-action-item>
						</uni-swipe-action>
			</view>
			
			<view class="noMore" v-if="csListArrl.length == 0">暂无数据~~</view>
			<view class="noMore" v-else>没有更多了~~</view>
			<view class="fb" @click="fb">
				<image src="../../static/fabu.png" mode=""></image>
				<view class="fdd">发钓点</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				csListArrl:[],
				// keywords:'',//搜索框的值
				isOpened: 'none',
				list:[],
				pagenum:1,
				options2: [
							// {
							// 	text: '取消',
							// 	style: {
							// 		backgroundColor: '#007aff'
							// 	}
							// },
							{
								text: '删除',
								style: {
									backgroundColor: '#F56C6C'
								}
							}
						],
			};
		},
		onLoad() {
				
		},
		onShow() {
			this.getlist()
		},
		// 触底功能
		onReachBottom() {
			this.pagenum++;
			this.getlist();
		},
		methods:{
			getlist(){
				this.$api.post("my/diaodianlist",{pagenum:this.pagenum,keywords:this.keyword}).then(res =>{
					console.log('list111',res)
					this.csListArrl = res.list
				})
			},
			fb(){
				uni.navigateTo({
					url:('/pages/index/spotPosition')
				})
			},
			search(e){//搜索
				console.log('123',e)
				this.getlist()
			},
			sousou(){
				this.search()
			},
			// 
			swipeClick(e, index) {
				console.log('123')
						let {
							content
						} = e;
						if (content.text === '删除') {
							uni.showModal({
								title: '提示',
								content: '是否删除',
								success: res => {
									if (res.confirm) {
										this.swipeList.splice(index, 1);
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else if (content.text === '添加') {
							if (this.swipeList.length < 10) {
								this.swipeList.push({
									id: new Date().getTime(),
									options: [{
											text: '置顶'
										},
										{
											text: '标记为已读',
											style: {
												backgroundColor: 'rgb(254,156,1)'
											}
										},
										{
											text: '删除',
											style: {
												backgroundColor: 'rgb(255,58,49)'
											}
										}
									],
									content: '新增' + new Date().getTime()
								});
								uni.showToast({
									title: `添加了一条数据`,
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: `最多添加十条数据`,
									icon: 'none'
								});
							}
						} else {
							uni.showToast({
								title: `点击了${e.content.text}按钮`,
								icon: 'none'
							});
						}
					},
					// 删除
					bindClick(e) {
							console.log('点击删除',e);
							this.$api.post("my/diaodianshanchu",{id:e.id}).then(res =>{
								this.getlist()
							})
							// uni.showToast({
							// 	title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
							// 	icon: 'none'
							// });
						},
						change(e,index) {
								
								console.log('返回：', e);
								
							},
		
				
				
		
		
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发",e);
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动",e);
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index],'right',0);
				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
				this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束",e);
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index],'right',0);
				}
			},
			//删除方法
			delData(item){
				console.log("删除")
				uni.showModal({
				    title: '提示',
				    content: "确认注销该人员？",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.noMore{
		text-align: center;
		font-size: 24rpx;
	}
	.head{
		background-image: url('/static/tab/bg.png');
		background-size:cover;
		width: 100%;
		height: 307rpx;
		position: relative;
		
	}
	.search{
		width: 90%;
		padding: 0 5%;
		position: absolute;
		top: 120rpx;
		z-index: 99;
		
		image{
			width: 25rpx;
			height: 28rpx;
			margin: 0 10rpx;
			// margin-bottom: 40rpx;
		}
		.xiala{
			width: 18rpx;
			height: 12rpx;
		}
	}
	.dw{
		margin-bottom: 35rpx;
		text-align: center;
	}
	.sousou{
		display: flex;
		justify-content: space-between;
		background-color: #f2f2f2;
		border: 4rpx solid #1A1A1A;
		height: 73rpx;
		border-radius: 13rpx;
	}
	.searchImg{
		width: 25rpx;
		height: 25rpx;
		// margin-top: 30rpx;
	}
	// .dw{
	// 	margin-bottom: 35rpx;
	// }
	.shouyi{
		width: 697rpx;
		// height: 133rpx;
		padding: 35rpx;
		background: #3681F3;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		margin: 0rpx 27rpx;
		box-sizing: border-box;
	}
	.mo{
		font-weight: 800;
		font-size: 40rpx;
		color: #FFFFFF;
		// line-height: 32rpx;
		text-align: center;
		.tex{
			
			margin-top: 0rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #ACCDFE;
		}
	}
	.note{
		margin: 27rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		background: #FFF8E6;
		border-radius: 20rpx;
		padding: 21rpx 27rpx;
		>text{
			color: #F43B3B;
		}
	}
	// lis
	.options{
		width: 697rpx;
	}
		.content-box {
			flex: 1;
			/* #ifdef APP-NVUE */
			justify-content: center;
			/* #endif */
			height: 44px;
			line-height: 44px;
			padding: 0 15px;
			position: relative;
			background-color: #fff;
			border-bottom-color: #f5f5f5;
			border-bottom-width: 1px;
			border-bottom-style: solid;
		}
	
	// 
	.lis{
		width: 697rpx;
		  // width: 100%;
		display: flex;
		position: relative;
		height: 133rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 27rpx;
		
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		// height: 44px;
		// line-height: 44px;
		// padding: 0 15px;
	}
	.remove {
		    width: 80px;
		    height: 100%;
		    background-color: red;
		    color: white;
		    position: absolute;
		    top: 0;
		    right: -86px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
			font-size: 16px;
		}

	.na{
		display: flex;
		padding: 33rpx 24rpx 15rpx 24rpx;
		justify-content: space-between;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		// margin: 33rpx 0 15rpx 0;
	}
	.ti{
		display: flex;
		padding: 0rpx 24rpx 15rpx 24rpx;
		justify-content: space-between;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	.fb{
		width: 167rpx;
		height: 67rpx;
		background: linear-gradient(90deg, #64BCFF, #438BF9);
		border-radius: 33rpx 0rpx 0rpx 33rpx;
		display: flex;
		font-weight: 500;
		font-size: 27rpx;
		color: #FFFFFF;
		line-height: 67rpx;
		position: fixed;
		top: 1000rpx;
		right: 0;
		z-index: 9999;
		image{
			width: 25rpx;
			height: 25rpx;
			margin: 20rpx;
		}
	}
</style>
